<template>
  <div class="warp">
    <div class="warp_auto">
      <!-- 类型 -->
      <div v-if="this.tianji == 1">
        <div class="warp_top">
          <div class="jiansuo-box">
            <el-switch
              v-model="tianji"
              :active-value="1"
              :inactive-value="0"
              active-text="类型"
              inactive-text="角色"
              @change="agreeChange($event)"
            >
            </el-switch>
          </div>
          <div class="jiansuo-box">
            <span class="label">类型名称：</span>
            <el-input
              v-model="userTypeName"
              class="input"
              placeholder="请输入类型名称"
              clearable
            />
          </div>
          <div class="jiansuo-box">
            <span class="label">状态：</span>

            <el-select v-model="value" placeholder="请选择" class="input" clearable>
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="jiansuo-box">
            <el-button type="primary" icon="el-icon-search" @click="btn">检索</el-button>
            <el-button type="primary" @click="addType">新增类型</el-button>
          </div>
        </div>

        <!-- 新增类型 -->
        <el-dialog
          title="新增类型"
          :visible.sync="dialogFormVisible"
          class="mod_box"
          :close-on-click-modal="false"
          custom-class="role-mask"
        >
          <el-form
            ref="ruleFormlei"
            :model="ruleFormlei"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="类型编码：" prop="userTypeCode">
              <el-input
                v-model="ruleFormlei.userTypeCode"
                class="el-inputer"
                placeholder="请输入类型编码"
              />
            </el-form-item>
            <el-form-item label="类型名称：" prop="userTypeName">
              <el-input
                v-model="ruleFormlei.userTypeName"
                class="el-inputer"
                placeholder="请输入类型名称"
              />
            </el-form-item>
            <el-form-item label="状态：" prop="status">
              <el-switch
                v-model="ruleFormlei.status"
                class="tablescope1"
                inactive-text="禁用"
                active-text="启用"
                :active-value="1"
                :inactive-value="0"
                active-color="#02538C"
                inactive-color="#B9B9B9"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button
              :plain="true"
              type="primary"
              @click="submitForm_leix('ruleFormlei')"
            >保 存
            </el-button
            >
          </div>
        </el-dialog>
        <!-- 新增角色 -->
        <el-dialog
          title="新增角色"
          :visible.sync="dialogFor"
          class="mod_box2"
          :close-on-click-modal="false"
          custom-class="role-mask"
        >
          <div class="usertypeadd">
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules"
              label-width="92px"
              class="demo-ruleForm"
            >
              <el-form-item label="角色名称：" prop="roleName">
                <el-input
                  v-model="ruleForm.roleName"
                  placeholder="请输入角色名称"
                  style="width: 180px"
                />
              </el-form-item>
              <el-form-item label="用户类型：" prop="leixin">
                <el-select
                  v-model="ruleForm.leixin"
                  placeholder="请选择用户类型"
                  value-key="id"
                  style="width: 180px"
                  clearable
                  @change="currentSel"
                >
                  <el-option
                    v-for="item in arr"
                    :key="item.user_type_code"
                    :label="item.user_type_name"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="状态：" prop="status">
                <el-switch
                  v-model="ruleForm.status"
                  class="tablescope1"
                  inactive-text="禁用"
                  active-text="启用"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#02538C"
                  inactive-color="#B9B9B9"
                />
              </el-form-item>
              <el-form-item label="注意:" prop="status">
                <span style="color: red">角色与用户类型须唯一对应</span>
              </el-form-item>
            </el-form>
          </div>

          <div class="tree" style="height: 213px; overflow: auto">
            <el-tree
              ref="tree"
              :data="starts"
              show-checkbox
              node-key="id"
              :props="defaultProps"
            />
          </div>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFor = false">取 消</el-button>
            <el-button
              :plain="true"
              type="primary"
              @click="(dialogFor = false), submitFormrole('ruleForm')"
            >保 存
            </el-button
            >
          </div>
        </el-dialog>
        <!-- 表格明细 -->
        <el-card>
          <el-table
            :data="arr"
            stripe
            style="width: 100%"
            height="540"
            :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
          >
            <el-table-column type="index" label="序号" fixed/>
            <el-table-column label="类型编码" align="center">
              <template slot-scope="scope">
              <span v-if="tianji == 1">{{
                  scope.row.user_type_code
                }}</span>
                <span v-else>{{ scope.row.role_name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="类型名称" align="center">
              <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                  scope.row.user_type_name
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
              </template>
            </el-table-column>
            <el-table-column
              property="status"
              label="状态"
              align="center"
            >
              <template scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  class="tablescoperoles"
                  inactive-text="禁用"
                  active-text="启用"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#02538C"
                  inactive-color="#B9B9B9"
                  @change="changeSwitchs(scope.$index, scope.row)"
                />
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row)"
                >编辑
                </el-button
                >
                <el-popover
                  :ref="`popover-${scope.$index}`"
                  trigger="click"
                  placement="top"
                  width="100"
                >
                  <p class="el-icon-warning">确定删除</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="no(scope)"
                    >取消
                    </el-button
                    >
                    <el-button type="primary" size="mini" @click="yes(scope)"
                    >确定
                    </el-button
                    >
                  </div>
                  <el-button
                    slot="reference"
                    size="mini"
                    style="margin-left: 10px"
                    type="danger"
                  >删除
                  </el-button
                  >
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <component-dialog
            :dialog-visible="dialogVisible"
            :dialog-info="dialogInfo"
            @update:dialogVisible="dialogVisibles"
          />
          <div class="paging">
            <el-pagination
              :current-page="start"
              :page-size="PageSize"
              :pager-count="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              @size-change="handleSizeChangelx"
              @current-change="handleCurrentChangelx"
            />
          </div>
        </el-card>
      </div>
      <!-- 角色 -->
      <div v-if="this.tianji == 0">
        <div class="warp_top">
          <div class="jiansuo-box">
            <el-switch
              v-model="tianji"
              :active-value="1"
              :inactive-value="0"
              active-text="类型"
              inactive-text="角色"
              @change="agreeChange($event)"
            >
            </el-switch>
          </div>
          <div class="jiansuo-box">
            <span class="label">角色名称:</span>
            <el-input
              v-model="userTypeName"
              class="input"
              placeholder="请输入类型名称"
              clearable
            />
          </div>
          <div class="jiansuo-box">
            <span class="label">用户类型：</span>
            <el-select v-model="yhlx" clearable class="input">
              <el-option
                v-for="item in juesezhiwang"
                :key="item.id"
                :label="item.user_type_name"
                :value="item.user_type_code"
              />
            </el-select>
          </div>
          <div class="jiansuo-box">
            <span class="label">状态:</span>

            <el-select v-model="value" placeholder="请选择" class="input" clearable>
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="jiansuo-box">
            <el-button type="primary" icon="el-icon-search" @click="btns">检索</el-button>
            <el-button type="primary" @click="addRole">新增角色</el-button>
          </div>
        </div>
        <!-- 新增类型 -->
        <el-dialog
          title="新增类型"
          :visible.sync="dialogFormVisible"
          class="mod_box"
          :close-on-click-modal="false"
          custom-class="role-mask"
        >
          <el-form
            ref="ruleFormlei"
            :model="ruleFormlei"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="类型编码：" prop="userTypeCode">
              <el-input
                v-model="ruleFormlei.userTypeCode"
                class="el-inputer"
                placeholder="请输入类型编码"
              />
            </el-form-item>
            <el-form-item label="类型名称：" prop="userTypeName">
              <el-input
                v-model="ruleFormlei.userTypeName"
                class="el-inputer"
                placeholder="请输入类型名称"
              />
            </el-form-item>
            <el-form-item label="状态：" prop="status">
              <el-switch
                v-model="ruleFormlei.status"
                class="tablescope1"
                inactive-text="禁用"
                active-text="启用"
                :active-value="1"
                :inactive-value="0"
                active-color="#02538C"
                inactive-color="#B9B9B9"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button
              :plain="true"
              type="primary"
              @click="submitForm_leix('ruleFormlei')"
            >保 存
            </el-button
            >
          </div>
        </el-dialog>
        <!-- 新增角色 -->
        <el-dialog
          title="新增角色"
          :visible.sync="dialogFor"
          class="mod_box2"
          :close-on-click-modal="false"
          custom-class="role-mask"
        >
          <div class="usertypeadd">
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules"
              label-width="92px"
              class="demo-ruleForm"
            >
              <el-form-item label="角色名称：" prop="roleName">
                <el-input
                  v-model="ruleForm.roleName"
                  placeholder="请输入角色名称"
                  style="width: 180px"
                />
              </el-form-item>
              <el-form-item label="用户类型：" prop="leixin">
                <el-select
                  v-model="ruleForm.leixin"
                  placeholder="请选择用户类型"
                  value-key="id"
                  style="width: 180px"
                  clearable
                  @change="currentSel"
                >
                  <el-option
                    v-for="item in arr"
                    :key="item.user_type_code"
                    :label="item.user_type_name"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="状态：" prop="status">
                <el-switch
                  v-model="ruleForm.status"
                  class="tablescope1"
                  inactive-text="禁用"
                  active-text="启用"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#02538C"
                  inactive-color="#B9B9B9"
                />
              </el-form-item>
              <el-form-item label="注意:" prop="status">
                <span style="color: red">角色与用户类型须唯一对应</span>
              </el-form-item>
            </el-form>
          </div>

          <div class="tree" style="height: 213px; overflow: auto;">
            <el-tree
              ref="tree"
              :data="starts"
              show-checkbox
              node-key="id"
              :props="defaultProps"
            />
          </div>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFor = false">取 消</el-button>
            <el-button
              :plain="true"
              type="primary"
              @click="(dialogFor = false), submitFormrole('ruleForm')"
            >保 存
            </el-button
            >
          </div>
        </el-dialog>
        <!-- 表格明细 -->

        <el-table
          :data="juesezhiwang"
          stripe
          style="width: 100%"
          height="540"
          :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
        >
          <el-table-column
            type="index"
            width="60"
            label="序号"
          ></el-table-column>
          <el-table-column
            prop="role_name"
            label="角色名称"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="user_type_name"
            label="类型名称"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
          </el-table-column>
          <el-table-column
            property="status"
            label="状态"
            width="180"
            align="center"
          >
            <template scope="scope">
              <el-switch
                v-model="scope.row.status"
                class="tablescoperoles"
                inactive-text="禁用"
                active-text="启用"
                :active-value="1"
                :inactive-value="0"
                active-color="#02538C"
                inactive-color="#B9B9B9"
                @change="changeSwitchss(scope.row)"
              />
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEditPart(scope.row)"
              >编辑
              </el-button
              >
              <el-popover
                :ref="`popovers-${scope.$index}`"
                trigger="click"
                placement="top"
                width="100"
              >
                <p class="el-icon-warning">确定删除</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="nos(scope)"
                  >取消
                  </el-button
                  >
                  <el-button type="primary" size="mini" @click="yess(scope)"
                  >确定
                  </el-button
                  >
                </div>
                <el-button
                  slot="reference"
                  size="mini"
                  style="margin-left: 10px"
                  type="danger"
                >删除
                </el-button
                >
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <!-- <component-dialog
          :dialog-visible="dialogVisible"
          :dialog-info="dialogInfo"
          @update:dialogVisible="dialogVisibles"
          :starts="starts"
          :defaultProps="defaultProps"
          :juesezhiwang="juesezhiwang"
          :hamowangzi="hamowangzi"
        /> -->
        <div class="paging">
          <el-pagination
            :current-page="start"
            :page-size="PageSize"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- 编辑 -->
      <el-dialog
        title="编辑角色信息"
        :visible.sync="dialogVisiblePart"
        :close-on-click-modal="false"
        custom-class="role-mask"
        class="mod_box2"
        ref="treePart"
      >
        <el-form class="usertypeadd" label-width="86px">
          <el-form-item label="类型编码 : ">
            <el-input
              v-model="dialogInfo.user_type_code"
              class="el-inputer"
              :disabled="true"
            />
          </el-form-item>
          <!-- <el-form-item label="类型名称 : ">
            <el-input v-model="dialogInfo.user_type_name" class="el-inputer" />
          </el-form-item> -->
          <el-form-item label="用户类型：" prop="dialogInfo.user_type_code">
            <el-select
              v-model="dialogInfo.user_type_code"
              placeholder="请选择用户类型"
              value-key="id"
              style="width: 180px"
              clearable
              @change="currentSel"
            >
              <el-option
                v-for="item in arr"
                :key="item.id"
                :label="item.user_type_name"
                :value="item.user_type_code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态 : ">
            <el-switch
              v-model="dialogInfo.status"
              class="tablescope1"
              inactive-text="禁用"
              active-text="启用"
              :active-value="1"
              :inactive-value="2"
              active-color="#02538C"
              inactive-color="#B9B9B9"
            />
          </el-form-item>
        </el-form>
        <div class="tree" style="height: 213px; overflow: auto">
          <el-tree
            ref="treeEdit"
            :data="starts"
            show-checkbox
            node-key="id"
            :props="defaultProps"
            :default-checked-keys="hamowangzi"
          />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelDialog_quxiao">取 消</el-button>
          <el-button type="primary" @click="cancelDialogHamo">保 存</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- switch -->
    <el-dialog title="状态更新" :visible.sync="dialogUpdata" class="mod_box1">
      <span>
        <i class="el-icon-warning"/>此操作将会改变开关状态, 是否继续?</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="(dialogUpdata = false), userTypelist()"
        >取 消</el-button
        >
        <el-button
          type="primary"
          @click="(dialogUpdata = false), updataSwitch()"
        >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="状态更新" :visible.sync="gongfu" class="mod_box1">
      <span>
        <i class="el-icon-warning"/>此操作将会改变开关状态, 是否继续?</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="(gongfu = false), cancelSwitch()">取 消</el-button>
        <el-button type="primary" @click="(gongfu = false), upDate()"
        >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import componentDialog from "@/components/mask/usertype";
import {Message} from "element-ui";
import {
  userTypelist,
  userType,
  role,
  userTypeupdate,
  userTypedelete,
  rolequeryList,
  roleUpdate,
  roleDelete,
  usereditRole,
} from "@/api/table";

export default {
  components: {
    componentDialog,
  },
  data() {
    return {
      hamowang: [],
      hamowangzi: [],
      tianji: 1,
      yhlx: "",
      yhlxs: [],
      dialogUpdata: false, // 开关
      switchId: "",
      switchStatus: "",
      starts: [{
        id: "0",
        label: "工作站首页",
        children: [{
          id: "0-0",
          label: "工作站首页",
        }],
      }, {
        id: "1",
        label: "床位管理",
        children: [{
          id: "1-2",
          label: "床位管理",
        }],
      }, {
        id: "7",
        label: "质量管控",
        children: [{
          id: "7-1",
          label: "质控指标维护",
        }, {
          id: "7-2",
          label: "ICU患者收治率和ICU患者收治床日率",
        }, {
          id: "7-3",
          label: "APACHEⅡ",
        }, {
          id: "7-15",
          label: "感染性休克3h集束化治疗",
        }, {
          id: "7-16",
          label: "感染性休克6h集束化治疗",
        }, {
          id: "7-13",
          label: "ICU抗菌药物治疗前病原学送检率",
        }, {
          id: "7-5",
          label: "ICU深静脉血栓（DVT）预防率",
        }, {
          id: "7-4",
          label: "ICU患者预计病死率",
        }, {
          id: "7-14",
          label: "ICU患者标化病死指数",
        }, {
          id: "7-7",
          label: "ICU非计划气管插管拔管率",
        }, {
          id: "7-8",
          label: "ICU气管插管拔管后48h内再插管率",
        }, {
          id: "7-6",
          label: "非计划转入ICU率",
        }, {
          id: "7-9",
          label: "转出ICU后48h内重返率",
        }, {
          id: "7-10",
          label: "ICU呼吸机相关性肺炎（VAP）发病率",
        }, {
          id: "7-11",
          label: "ICU血管内导管相关血流感染（CRBSI）发病率",
        }, {
          id: "7-12",
          label: "ICU导尿管相关泌尿系感染（CAUTI）发病率",
        }]
      }, {
        id: 8,
        label: "统计分析",
        children: [{
          id: "8-5",
          label: "病人查询"
        }, {
          id: "8-1",
          label: "出入科"
        }],
      }, {
        id: 11,
        label: "护理模板",
        children: [{
          id: "11-1",
          label: "护理模板",
        }]
      }, {
        id: 9,
        label: "字典管理",
        children: [{
          id: "9-3",
          label: "科室字典",
        }, {
          id: "9-1",
          label: "床位字典",
        }, {
          id: "9-2",
          label: "病区字典",
        }, {
          id: "9-4",
          label: "监护仪字典",
        }, {
          id: "9-5",
          label: "主要疾病得分字典"
        }, {
          id: "9-6",
          label: "通用字典"
        }, {
          id: "9-7",
          label: "评分字典"
        }, {
          id: "9-9",
          label: "呼吸机字典"
        }, {
          id: "9-10",
          label: "串口转网口模块字典"
        }]
      }, {
        id: 10,
        label: "系统设置",
        children: [{
          id: "10-1",
          label: "用户管理",
        }, {
          id: "10-2",
          label: "角色管理",
        }, {
          id: "10-5",
          label: "通用设置"
        }, {
          id: "10-4",
          label: "报警设置"
        }, {
          id: "10-6",
          label: "操作日志"
        }, {
          id: "10-7",
          label: "任务管理"
        }]
      }, {
        id: 22,
        label: "病人管理首页",
        children: [{
          id: "22-1",
          label: "病人管理首页",
        }]
      }, {
        id: 12,
        label: "护理评估",
        children: [{
          id: "12-1",
          label: "入院护理评估单",
        }, {
          id: "12-3",
          label: "转科交接",
        }]
      }, {
        id: "4",
        label: " 重症评分",
        children: [{
          id: "4-17",
          label: "APACHEⅡ评分",
        }, {
          id: "4-3",
          label: "Morse跌倒评分",
        }, {
          id: "4-4",
          label: "Braden压疮评分",
        }, {
          id: "4-5",
          label: "Glasgow昏迷评分",
        }, {
          id: "4-6",
          label: "CPOT疼痛评分",
        }, {
          id: "4-7",
          label: "VTE-Padua评分",
        }, {
          id: "4-8",
          label: "VTE-Caprini评分",
        }, {
          id: "4-9",
          label: "Autar-DVT风险评分",
        }, {
          id: "4-10",
          label: "ADL自理能力评分",
        }, {
          id: "4-11",
          label: "RASS镇静评分",
        }, {
          id: "4-12",
          label: "NRS2002营养风险评分",
        }, {
          id: "4-13",
          label: "Cam谵妄评分",
        }, {
          id: "4-14",
          label: "导管风险评分",
        }, {
          id: "4-15",
          label: "导管危险因素",
        }, {
          id: "4-16",
          label: "导管风险脱落评分",
        }, {
          id: "4-18",
          label: "SOFA评分",
        }, {
          id: "12-2",
          label: "血栓风险评分",
        }, {
          id: "5-18",
          label: "ICU体力功能测试（PFIT）",
        }],
      }, {
        id: "5",
        label: " 护理管理",
        children: [{
          id: "5-1",
          label: " 护理单文书",
        }, {
          id: "5-2",
          label: "体温单",
        }, {
          id: "5-6",
          label: "血糖监测",
        }, {
          id: "5-12",
          label: "有创动脉血压监测表",
        }, {
          id: "5-17",
          label: "呼吸治疗记录单",
        }, {
          id: "5-15",
          label: "CRRT护理记录",
        }, {
          id: "5-14",
          label: "俯卧位通气治疗记录单",
        }, {
          id: "5-16",
          label: "ICU-ECMO护理记录单",
        }, {
          id: "5-13",
          label: "自主呼吸试验评估表",
        }]
      }, {
        id: "6",
        label: "医嘱列表",
        children: [{
          id: "6-1",
          label: "医嘱列表",
        }]
      }, {
        id: "17",
        label: "统计分析",
        children: [{
          id: "17-1",
          label: "统计分析"
        }]
      }, {
        id: 15,
        label: "交接班",
        children: [{
          id: "15-1",
          label: "交接班",
        }]
      }, {
        id: 13,
        label: "手术查看",
        children: [{
          id: "13-1",
          label: "手术查看",
        }],
      }, {
        id: 14,
        label: "管路管理",
        children: [{
          id: "14-1",
          label: "管路管理",
        }]
      }
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      leixin: "",
      optionsleixin: [],
      activeName: "first",
      // 控制弹窗 显示
      dialogVisible: false,
      dialogVisiblePart: false,
      // 点击查看按钮  这条数据详细信息
      dialogInfo: {},
      pageSize: 10, // 每页多少条
      currentPage: 1, // 当前页
      listarr: null,
      listLoading: true,
      loading: false,
      userTypeName: "",
      dialogFormVisible: false,
      dialogFor: false,
      del: false,
      ruleForm: {
        userTypeCode: "",
        userTypeName: "",
        status: 1
      },
      ruleFormlei: {
        userTypeCode: "",
        userTypeName: "",
        status: 1
      },
      rules: {
        userTypeCode: [
          {required: true, message: "请输入类型编码", trigger: "blur"},
        ],
        userTypeName: [
          {required: true, message: "请输入类型名称", trigger: "blur"},
        ],
      },
      options: [
        {
          id: "1",
          value: 1,
          label: "启用",
        },
        {
          id: "0",
          value: 0,
          label: "禁用",
        },
      ],
      value: "",
      arr: [],
      arrleix: [], // 新增类型
      // id: 123,
      userTypeCode: "",
      status: "",
      roleName: "",
      menuCodes: [
        {menuCode: "123", type: 1},
        {menuCode: "12312", type: 0},
      ],
      //
      juesezhiwang: [],
      start: 1, // 默认显示第几页
      totalCount: 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
      pgeSizes: [10, 20, 30, 40], // 个数选择器（可修改）
      PageSize: 10, // 默认每页显示的条数（可修改）
      id: "",
      statusss: "",
      gongfu: false,
    };
  },
  created() {
  },
  mounted() {
    this.chaxunleixing(this.PageSize, this.start);
    this.chaxun(this.PageSize, this.start);
  },
  methods: {
    agreeChange(value) {
      this.tianji = value;
      if (this.tianji === 1) {
        this.chaxunleixing(this.PageSize, this.start); //类型
      } else if (this.tianji === 0) {
        this.chaxun(this.PageSize, this.start); //角色
      }
    },
    addType() {
      this.ruleFormlei = {
        userTypeCode: "",
        userTypeName: "",
        status: 1
      };
      this.dialogFormVisible = true;
    },
    addRole() {
      this.ruleForm = {
        userTypeCode: "",
        userTypeName: "",
        status: 1
      };
      this.dialogFor = true;
    },
    //角色
    yess(scope) {
      // 可以在这里执行删除数据的回调操作.......删除操作......
      const id = scope.row.id;
      roleDelete({id: id}).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.chaxun(this.PageSize, this.start);
      });
      scope._self.$refs[`popovers-${scope.$index}`].doClose();
    },
    nos(scope) {
      this.$message("取消删除");
      scope._self.$refs[`popovers-${scope.$index}`].doClose();
    },
    changeSwitchss(row) {
      this.id = row.id;
      this.statusss = row.status;
      this.gongfu = true;
    },
    upDate() {
      roleUpdate({
        id: this.id,
        status: this.statusss,
      });
    },
    yes(scope) {
      // 可以在这里执行删除数据的回调操作.......删除操作......
      const id = scope.row.id;
      userTypedelete({id: id}).then((res) => {
        //console.log(333333333333333333);
        this.$message({
          message: "删除成功",
          type: "success",
        });
        scope._self.$refs[`popover-${scope.$index}`].doClose();
      });
      this.chaxunleixing(this.PageSize, this.start);
    },

    no(scope) {
      this.$message("取消删除");
      scope._self.$refs[`popover-${scope.$index}`].doClose();
    },
    // 新增类型
    submitForm_leix(ruleFormlei) {
      this.$refs[ruleFormlei].validate((valid) => {
        if (valid) {
          userType(this.ruleFormlei).then((res) => {
            if (res.code === 3) {
              Message({
                message: res.msg,
                type: "error",
                duration: 1500,
              });
              this.dialogFormVisible = true;
            } else {
              this.arrleix = res.data;
              this.dialogFormVisible = false;
            }
            this.chaxunleixing(this.PageSize, this.start);
          });
        } else {
          this.$message({
            message: "请填写必填项！",
            type: "warning",
            duration: 1500,
          });
          this.dialogFormVisible = true;
          return false;
        }
      });
    },
    // 下拉获取id
    currentSel(selVal) {
      this.userTypeCode = selVal.user_type_code;
    },
    // 新增角色
    submitFormrole() {
      var menuList = [];
      var id = "menuCode";
      var type = "type";
      const menuCode = this.$refs.tree.getCheckedKeys();
      for (var i = 0; i < menuCode.length; i++) {
        const menuData = {};

        menuData[id] = menuCode[i];
        menuData[type] = 0;
        menuList.push(menuData);
      }
      role({
        userTypeCode: this.userTypeCode,
        status: this.ruleForm.status,
        roleName: this.ruleForm.roleName,
        menuCodes: JSON.stringify(menuList),
      }).then((res) => {
        if (res.code === 200) {
          Message({
            message: "角色添加成功",
            type: "success",
            duration: 1500,
          });
        } else {
          Message({
            message: "角色添加失败",
            type: "error",
            duration: 1500,
          });
        }
      });
    },
    // 每页多少条
    handleSizeChangelx(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 点击每页显示的条数时，显示第一页
      this.chaxunleixing(val, 1);
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.start = 1;
    },
    // 当前页
    handleCurrentChangelx(val) {
      this.start = val;
      // 切换页码时，要获取每页显示的条数
      this.chaxunleixing(this.PageSize, (this.start = val));
    },
    // 列表开关的id
    changeSwitchs(index, row) {
      this.switchId = row.id;
      this.switchStatus = row.status;
      this.dialogUpdata = true;
    },
    // 保存开关状态-确认
    updataSwitch() {
      userTypeupdate({
        id: this.switchId,
        status: this.switchStatus,
      }).then((res) => {
        this.chaxunleixing(this.PageSize, this.start);
      });
    },
    // 保存开关状态-取消
    cancelSwitch() {
      this.chaxunleixing(this.PageSize, this.start); // 重新获取表格
    },
    // 搜索按钮
    btn() {
      this.start = 1;
      userTypelist({
        userTypeName: this.userTypeName,
        status: this.value === "" ? null : Number(this.value),
        start: this.start,
        size: this.PageSize,
      }).then((res) => {
        this.arr = res.data;
        this.totalCount = res.totalCount;
      });
    },
    handleEdit(info) {
      // 弹窗打开
      this.dialogVisible = true;
      this.dialogInfo = info;
    },
    // handleEditPart(info) {
    //   // 弹窗打开
    //   this.hamowangzi = [];
    //   this.dialogVisiblePart = true;
    //   // this.$nextTick(() => {
    //   //   this.$refs.treePart.setChecked([]);
    //   // });
    //   for (let g = 0; g < info.menuCodes.length; g++) {
    //     this.hamowangzi.push(info.menuCodes[g].menu_code);
    //   }
    // },
    handleEditPart(info) {
      // 弹窗打开
      this.hamowangzi = [];
      this.dialogInfo = info;
      this.dialogVisiblePart = true;
      for (let g = 0; g < info.menuCodes.length; g++) {
        this.hamowangzi.push(info.menuCodes[g].menu_code);
      }
      this.$nextTick(() => {
        this.$refs.treeEdit.setCheckedKeys(this.hamowangzi);
      });
    },
    cancelDialogHamo() {
      let menuList = [];
      var id = "menuCode";
      var type = "type";
      const menuCode = this.$refs.treeEdit.getCheckedKeys();
      for (var i = 0; i < menuCode.length; i++) {
        const menuData = {};

        menuData[id] = menuCode[i];
        menuData[type] = 0;
        menuList.push(menuData);
      }
      usereditRole({
        id: this.dialogInfo.id,
        userTypeCode: this.dialogInfo.user_type_code,
        roleName: this.dialogInfo.role_name,
        status: this.dialogInfo.status,
        menuCodes: JSON.stringify(menuList),
      }).then((res) => {
        this.dialogVisiblePart = false;
        this.chaxun(this.PageSize, this.start);
      });
    },
    cancelDialog_quxiao() {
      this.dialogVisiblePart = false;
    },
    // 子组件传 过来的 数据
    dialogVisibles(v) {
      this.dialogVisible = v;
    },
    handleDelete(index, row) {
    },
    userTypelist() {
      userTypelist().then((res) => {
        this.arr = res.data;
        this.totalCount = res.totalCount;
      });
    },
    change: function (index, row) {
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClick(tab, event) {
    },
    //
    chaxun(n1, n2) {
      rolequeryList({
        roleName: this.userTypeName,
        status: this.value === "" ? null : Number(this.value),
        userTypeCode: this.yhlx,
        size: n1,
        start: n2,
      }).then((res) => {
        this.juesezhiwang = [];
        this.juesezhiwang = res.data;
        this.totalCount = res.totalCount;
      });
    },
    chaxunleixing(n1, n2) {
      userTypelist({
        userTypeName: this.userTypeName,
        status: this.value === "" ? null : Number(this.value),
        size: n1,
        start: n2,
      }).then((res) => {
        this.arr = res.data;
        this.totalCount = res.totalCount;
      });
    },
    btns() {
      this.start = 1;
      rolequeryList({
        roleName: this.userTypeName,
        status: this.value === "" ? null : Number(this.value),
        userTypeCode: this.yhlx,
        start: this.start,
        size: this.PageSize,
      }).then((res) => {
        this.juesezhiwang = res.data;
        this.totalCount = res.totalCount;
      });
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 点击每页显示的条数时，显示第一页
      this.chaxun(val, 1);
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.start = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.start = val;
      // 切换页码时，要获取每页显示的条数
      this.chaxun(this.PageSize, (this.start = val));
    },
  },
};
</script>
<style lang="scss" scoped>
//表格里的状态
.tablescoperoles {
  ::v-deep .el-switch__label--left {
    position: relative;
    left: 59px;
    color: #fff;
    z-index: -1111;
  }

  ::v-deep .el-switch__core {
    width: 58px !important;
  }

  ::v-deep .el-switch__label--right {
    position: relative;
    right: 59px;
    color: #fff;
    z-index: -1111;
  }

  ::v-deep .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }

  ::v-deep .el-switch__label--left.is-active {
    z-index: 1111;
    color: #9c9c9c !important;
  }
}

//弹窗里的状态
.tablescope1 {
  position: relative !important;
  left: -37px !important;

  ::v-deep .el-switch__label--left {
    position: relative;
    left: 59px;
    color: #fff;
    z-index: -1111;
  }

  ::v-deep .el-switch__core {
    width: 58px !important;
  }

  ::v-deep .el-switch__label--right {
    position: relative;
    right: 59px;
    color: #fff;
    z-index: -1111;
  }

  ::v-deep .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }

  ::v-deep .el-switch__label--left.is-active {
    z-index: 1111;
    color: #9c9c9c !important;
  }
}

.role-mask .el-dialog__header {
  border-bottom: 1px solid #e8eaec;
}

.role-mask .el-dialog__body {
  padding: 16px 16px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}

.role-mask .el-dialog__footer {
  border-top: 1px solid #e8eaec;
}
</style>
